<script lang="ts" setup>
	import type { VbenFormSchema } from '@vben/common-ui';

	import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
	import { $t } from '@vben/locales';

	import { useAuthStore } from '#/store';

	defineOptions({ name: 'Login' });

	const authStore = useAuthStore();

	const formSchema = computed(() : VbenFormSchema[] => {
		return [
			{
				component: 'VbenInput',
				componentProps: {
					placeholder: $t('authentication.usernameTip'),
				},
				fieldName: 'userName',
				label: $t('authentication.username'),
				rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
			},
			{
				component: 'VbenInputPassword',
				componentProps: {
					placeholder: $t('authentication.password'),
				},
				fieldName: 'password',
				label: $t('authentication.password'),
				rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
			},
			{
				component: markRaw(SliderCaptcha),//markRaw用于标记对象使其‌永久跳过响应式转换
				fieldName: 'captcha',
				rules: z.boolean().refine((value) => value, {
					message: $t('authentication.verifyRequiredTip'),
				}),
			},
		];
	});
</script>
<template>
	<AuthenticationLogin :form-schema="formSchema" :loading="authStore.loginLoading" :show-qrcode-login="false"
		:show-third-party-login="false" :show-code-login="false" @submit="authStore.authLogin" />
</template>